<template>
  <div>
    <!-- 头部搜索栏开始 -->
    <van-sticky>
      <div class="header">
        <van-search
          v-model="name"
          shape="round"
          show-action
          placeholder="疾病/药品/科普/医院"
          class="search"
          @keyup.native.enter="search"
        >
          <template #action>
            <van-icon name="search" color="#4374b4" size="28" @click="search" />
          </template>
        </van-search>
      </div>
      <!-- 搜索栏结束 -->
      <!-- 内容主题开始 -->
      <div class="title">
        <p>健康知识</p>
      </div>

      <!-- 标签栏开始 -->
      <div class="nav">
        <!-- <p>全部</p> -->
        <van-tabs v-model:active="navActive" class="tabs">
          <van-tab title="全部" name="5"></van-tab>
          <van-tab title="女性健康" name="0"></van-tab>
          <van-tab title="心脑血管" name="1"></van-tab>
          <van-tab title="防癌抗癌" name="2"></van-tab>
          <van-tab title="整形美容" name="3"></van-tab>
          <van-tab title="饮食营养" name="4"></van-tab>
        </van-tabs>
        <van-popover
          v-model:show="showPopover"
          :actions="actions"
          placement="bottom-end"
        >
          <!-- @select="onSelect" -->
          <template #reference>
            <van-icon name="wap-nav" size="25px" />
          </template>
        </van-popover>
      </div>
    </van-sticky>

    <!-- 知识列表 -->
    <van-pull-refresh
      v-model="loading"
      success-text="刷新成功"
      @refresh="onPullRefresh"
    >
      <van-list
        v-if="knows && knows.length > 0"
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <know-item
          v-for="item in knows"
          @click.native="router.push(`/detail/${item.n_id}`)"
          :key="item.n_id"
          :know="item"
        ></know-item>
      </van-list>
      <van-empty v-else>暂无数据</van-empty>
    </van-pull-refresh>

    <!-- 主体结束 -->
    <!-- 页脚 -->
    <div style="height: 50px"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import httpApi from "@/http";
import Know from "@/type/Know";
import { useRouter } from "vue-router";

const router = useRouter();

// 处理页面挂载完毕后,自动加载所有健康知识列表数据
const knows = reactive<Know[]>([]);
onMounted(() => {
  // 发送请求，加载数据
  let params = { page: 1, pagesize: 5 };
  httpApi.healthApi.queryAll(params).then((res) => {
    console.log("加载所有知识列表", res);
    knows.splice(0, knows.length, ...res.data.data.result);
  });
});

// 监听回车模糊查询新闻
let name = "";
const search = function () {
  let params = { n_title: name };
  httpApi.healthApi.queryNameLike(params).then((res) => {
    console.log("模糊查询相关知识", res);
    knows.splice(0, knows.length, ...res.data.data);
  });
};

// const value = ref("");
// const activeName = ref("a");

const showPopover = ref(false);
// 通过 actions 属性来定义菜单选项
const actions = ref([
  { text: "女性健康" },
  { text: "心脑血管" },
  { text: "防癌抗癌" },
  { text: "整形美容" },
  { text: "饮食营养" },
]);

const navActive = ref("-1");
// 处理顶部导航选中项的变化，更新列表
watch(navActive, (newval, oldval) => {
  // newval就是选中类别的id
  window.scrollTo(0, 0); // 浏览器的默认文档流滚动到顶部

  // 整理参数发请求
  let params = { n_category: parseInt(newval), page: 1, pagesize: 5 };
  httpApi.healthApi.queryByCategoryId(params).then((res) => {
    console.log("加载某类别知识列表", res);
    // splice(删除起始位置, 删多少个元素, 替换成其他元素)
    knows.splice(0, knows.length, ...res.data.data.result);
  });

  // 如果点击全部
  if (newval == "5") {
    // 发送请求，加载数据
    let params = { page: 1, pagesize: 5 };
    httpApi.healthApi.queryAll(params).then((res) => {
      console.log("加载全部知识列表", res);
      knows.splice(0, knows.length, ...res.data.data.result);
    });
  }
});

// 处理列表的触底加载
const loading = ref(false);
const finished = ref(false);
// 当触底后执行,onLoad方法  vant将会自动设置loading = true
// 在此处发送请求,访问当前类别的下一页数据
// 获取响应后追加到原数据末尾 loading=false
const onLoad = function () {
  console.log(onLoad);
  // 整理参数
  let n_category = parseInt(navActive.value);
  let page = Math.floor(knows.length / 5) + 1;
  let params = { n_category, page, pagesize: 5 };
  httpApi.healthApi.queryByCategoryId(params).then((res) => {
    console.log(`加载到了第${page}数据`, res);
    knows.push(...res.data.data.result);
    loading.value = false; //关闭正在加载中的状态
    //判断是否到底
    if (knows.length == res.data.data.total) {
      finished.value = true;
    }
  });
  // 判断是否是在全部里下拉的
  if (n_category == 5) {
    // 发送请求
    let params = { page, pagesize: 5 };
    httpApi.healthApi.queryAll(params).then((res) => {
      console.log(`加载到了第${page}数据`, res);
      knows.push(...res.data.data.result);
      loading.value = false; //关闭正在加载中的状态
      // 判断是否到底
      if (knows.length == res.data.data.total) {
        finished.value = true;
      }
    });
  } 
};

// 下拉刷新
const count = ref(0);
const onPullRefresh = () => {
  console.log("下拉刷新...");
  setTimeout(() => {
    loading.value = false;
    count.value++;
  }, 1000);
};
</script>

<style scoped>
.header {
  background-color: #ddeafa;
  max-height: 50px;
  padding: 10px;
  /* box-sizing: border-box; */
}
.search {
  width: 100%;
  max-height: 50px;
  line-height: 50px;
  align-items: center;
  margin: 0;
  padding: 0;
  border-radius: 15px;
}
.nav {
  display: flex;
  align-items: center;
  padding: 0px 15px;
  border-bottom: 1px solid #e2e2e2;
  background-color: #fff;
}
.title {
  text-align: left;
  padding: 20px 10px 0;
  font-weight: bold;
  color: #000;
  background-color: #fff;
  font-size: 1.4em;
}
.title > p {
  margin: 0;
  padding: 0;
}
.tabs {
  flex: 1;
  margin: 0;
}
</style>
<style>
/* 添加这段样式后，自定义修改样式 */
:root:root {
  --van-nav-bar-background: #387af437;
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  --van-tab-font-size: var(--van-font-size-lg);
}
</style>
